<template>
    <!-- 人员管理-数据分析 -->
    <div class="emp_cantainer">
        <div class="content">
            <!-- <div class="contentBox" style="width:30%"> -->
            <div class="contentBox" style="width:50%">
                <div class="title">
                    <div class="name">
                        <img src="../../assets/svg/t1.svg"/>
                        在职人员
                    </div>
                    <div class="line">{{empTotal}}</div>
                </div>
                <div class="chartBox1">
                    <div id="num"></div>
                    <div class="lable">
                        <div @click="pageJump(0)"><span class="radio"></span>管理人员:<span class="number">{{managerNum}}</span></div>
                        <div @click="pageJump(1)"><span class="radio"></span>施工人员:<span class="number">{{workerNum}}</span></div>
                    </div>
                </div>
            </div>
            <!-- <div class="contentBox" style="width:35%"> -->
            <div class="contentBox" style="width:50%">
                <div class="title">
                    <div class="name">
                        <img src="../../assets/svg/t1.svg"/>
                        在职人员统计
                    </div>
                </div>
                <div class="chartBox1">
                    <div class="toChar">
                        <div id="local"></div>
                        <div class="cNum">{{localEmpTotal}}</div>
                        <div class="cNam">在职人员</div>
                    </div>
                    <div class="toUp">
                        <div class="local">
                            <span v-for="(item,index) in localList" :key="index"  :class="item.id ==localType?'active':''" @click="onLocalType(item)"> {{item.name}}</span>
                        </div>
                        <vue-seamless-scroll class="localItems" ref="seamlessScroll" :data="localEmpList" :class-option="classOption">
                            <ul class="list">
                                <li v-for="(item,index) in localEmpList" :key="index" @click="pageJump(3,item)">
                                    <span class="radius" :style="{'background':colors[index]}"></span>
                                    <span class="name">
                                        <Tooltip  transfer :content="item.name" placement="top-start">
                                            {{item.name}}
                                        </Tooltip>
                                    </span>
                                    <span class="sub">{{item.num+'人'}}</span>
                                    <span>{{(item.rate) + '%'}}</span>
                                </li>
                            </ul>
                        </vue-seamless-scroll>
                    </div>
                </div>
            </div>
            <!-- <div class="contentBox" style="width:35%">
                <div class="title">
                    <div class="name">
                        <img src="../../assets/svg/t1.svg"/>
                        今日出勤
                    </div>
                     <div class="line">{{AttendEmpTotal}}<span>人</span></div>
                     <div class="name">
                        出勤率
                    </div>
                     <div class="line">{{empTotalRate}}<span>%</span></div>
                </div>
                <div class="chartBox1">
                   <div class="type1">
                        <div class="attendance" id="attendance1"></div>
                        <div class="subTitle">管理人员:{{AttendmanagerNum}}</div>
                   </div>
                   <div class="type1">
                        <div class="attendance" id="attendance2"></div>
                        <div class="subTitle">施工人员:{{AttendworkerNum}}</div>
                   </div>
                </div>
            </div> -->
        </div>
        <div class="content">
            <div class="contentLeft" style="flex:1;border-right:0.1rem solid #f5f5f5;height:7rem;">
                <div class="contentMain" style="border-bottom:0.2rem solid #f5f5f5;">
                    <div class="contentBox" style="width:44%">
                         <div class="title">
                            <div class="name">
                                <img src="../../assets/svg/t1.svg"/>
                                性别占比
                            </div>
                        </div>
                        <div class="contentLeft">
                            <div class="gender">
                                <div class="pic1">
                                    <img src="../../assets/svg/男.svg"/>
                                    <font class="name">{{malePercent}}%</font>
                                    男<span>{{male}}</span>人
                                </div>
                                <div class="pic2">
                                    <img src="../../assets/svg/女.svg"/>
                                    <font class="name">{{femalePercent}}%</font>
                                    女<span>{{female}}</span>人
                                </div>
                            </div>
                            <div class="sexBar">
                                <el-tooltip class="item" :content="`男性占比：${malePercent}%`" placement="top" effect="light">
                                    <div class="in" :style="{'width':malePercent + '%'}">
                                       <!-- <span>{{malePercent}}%</span> -->
                                    </div>
                                </el-tooltip>
                                <el-tooltip class="item" :content="`女性占比：${femalePercent}%`" placement="top" effect="light">
                                    <div class="out" :style="{'width':femalePercent + '%'}">
                                            <!-- <span>{{femalePercent}}%</span> -->
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                    </div>
                    <div class="contentBox" style="width:56%">
                         <div class="title">
                            <div class="name">
                                <img src="../../assets/svg/t1.svg"/>
                                近期人员变化
                            </div>
                        </div>
                        <div class="chartBox2">
                            <div id="personnelchanges"></div>
                        </div>
                    </div>
                </div>
                 <div class="contentMain">
                    <!-- <div class="contentBox" style="width:50%"> -->
                    <div class="contentBox" style="width:100%">
                         <div class="title">
                            <div class="name">
                                <img src="../../assets/svg/t1.svg"/>
                                年龄占比
                            </div>
                            <div class="subtitle">平均年龄：<span>{{average}}</span>岁</div>
                        </div>
                        <div class="chartBox2">
                            <div id="age"></div>
                        </div>
                    </div>
                    <!-- <div class="contentBox" style="width:50%">
                         <div class="title" style="position: relative;">
                            <div class="name">
                                <img src="../../assets/svg/t1.svg"/>
                                人员动态
                            </div>
                            <div class="subtitle">实时在场人数：<span>{{localeNum}}</span></div>
                            <div class="emp_tab">
                                <span v-for="(item,index) in tabPositionList" :key="index"  :class="item.id ==tabPosition?'active':''" @click="ontabPosition(item)"> {{item.name}}</span>
                            </div>
                        </div>
                        <div class="chartBox2">
                            <vue-seamless-scroll class="tabPositionTtems" ref="empState" :data="personnerList" :class-option="classOption">
                                <ul class="tabBox">
                                    <li v-for="(item,index) in personnerList" :key="index">
                                        <img :src="item.avatar?item.avatar:src" alt />
                                        <p>{{item.name}}</p>
                                        <span v-if="tabPosition == 0">{{item.time}}</span>
                                    </li>
                                </ul>
                            </vue-seamless-scroll>
                        </div>
                    </div> -->
                </div>
            </div>
            <!-- <div class="contentBox" style="width:30%;margin-left: 0.2rem;">
                <div class="title">
                    <div class="name">
                        <img src="../../assets/svg/t1.svg"/>
                        近七天出勤情况
                    </div>
                </div>
                <div class="chartBox2">
                    <div id="attendNum"></div>
                </div>
                <div class="chartBox2">
                    <vue-seamless-scroll id="AttendSlide"  :data="AttendDataList" :class-option="classOption">
                        <ul class="grouBox">
                            <li v-for="(item,index) in AttendDataList" :key="index">
                                <span class="name">{{item.name}}</span>
                                <span class="num">{{item.num}}人</span>
                                <span class="out">
                                    <span class="in" :style="{'width':item.rate + '%'}"></span>
                                </span>
                                <span class="perc">{{item.rate+'%'}}</span>
                            </li>
                        </ul>
                    </vue-seamless-scroll>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script>
import {
    getEmpData,
    getAnaGroupEmp,
    getAnaCorpEmp,
    getAnaWorkEmp,
    getPerDayAttendData,
    getRecentAttendEmp,
    getRecentEnterEmp
} from "@/api/api.js";
import { format , bubbleSort} from "@/sever/utils.js";
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
    components: {
        vueSeamlessScroll
    },
    data() {
        return {
            classOption:{
                step: 0.5,
            },
            colors: [
                "#2669FC ",
                "#21EDF3 ",
                "#8BB5FE ",
                "#FF6A6A ",
                "#FFD268 ",
                "#28D79C ",
                "#8bc34a",
                "#fbc02d",
                "#b3e5fc",
                "#ef5350",
                "#4dd0e1",
                "#304ffe",
                "#ff4081",
                "#82b1ff",
                "#6a1b9a",
                "#f57f17",
                "#b71c1c",
                "#a5d6a7",
                "#ffab91",
                "#880e4f",
                "#f8bbd0"
            ],
            src: require("./../../assets/images/common/noPeo.png"),
            malePercent: "",
            femalePercent: "",
            male:0,
            female:0,
            managerNum:0,
            workerNum:0,
            empTotal:0,
            planAttendNum:0,
            deptId: "",
            localList:[
                {
                   id:0,
                   name:"班组"
                },
                {
                    id:1,
                    name:"合作单位"
                },
                {
                    id:2,
                    name:"工种"
                }
            ],
            localType:0,
            localEmpTotal:0,
            localEmpList:[],
            todayAttendEmpList: [],
            corpEmpList: [],
            corpNameList: [],
            workTypeEmpList: [],
            workTypeNameList: [],
            weekData: [],
            enterNumList: [],
            outerNumList: [],
            attendNumList: [],
            data: format(new Date(), "YYYY-MM-DD"),
            tabPosition: 0,
            tabPositionList:[
                {
                   id:0,
                   name:"最近出勤"
                },
                {
                    id:1,
                    name:"最新进场"
                },
            ],
            personnerList: [],
            AttendDataList: [],
            AttendEmpTotal:0,
            AttendmanagerNum:0,
            AttendworkerNum:0,
            managerNumRate:0,
            workerNumRate:0,
            empTotalRate:0,
            timer1:null,
            localeNum:"",
            ageTypeList :[],//年龄类型统计
            ageList:[],//年龄统计
            otherNumList:[],//年龄统计-其他
            womanNumList:[],//年龄统计-女
            manNumList:[],//年龄统计-男
            average:0,//平均年龄
        };
    },
    methods: {
        /**
         * @description:在职人员点击跳转
         * @param {type}
         * @return {*}
         * @author: songzhu
         */
        pageJump(type,item){
            let empType = {}
            if(type == 0){
                empType['name'] = '管理人员'
                this.$router.push({name: 'emp_list',params: {data: empType}})
            }else if(type == 1){
                empType['name'] = '施工人员'
                this.$router.push({name: 'emp_list',params: {data: empType}})
            }else{
                item['localType'] = this.localType
                this.$router.push({name: 'emp_list',params: {data: item}})
            }
        },

        getDate() {
            this.weekData = [];
            this.enterNumList = [];
            this.outerNumList = [];
            this.attendNumList = [];
            this.workTypeEmpList = [];
            this.workTypeNameList = [];
            this.corpNameList = [];
            this.corpEmpList = [];
            let parmas = {
                deptId: this.deptId
            };
            getEmpData(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.empTotal = res.data.enterEmp.empTotal;//总人数
                        this.planAttendNum = res.data.todayAttendEmp.planAttendNum //计划出勤人数
                        this.managerNum = res.data.enterEmp.managerNum;//管理人员
                        this.workerNum = res.data.enterEmp.workerNum;//施工人员
                        this.male = res.data.enterEmp.male; //男
                        this.female = res.data.enterEmp.female;//女

                        //计算男女比例
                        if ( this.empTotal == 0) {
                            this.malePercent = 0;
                            this.femalePercent = 0;
                        } else {
                            this.malePercent = ((res.data.enterEmp.male/res.data.enterEmp.empTotal) * 100).toFixed(2);
                            this.femalePercent = ((res.data.enterEmp.female/res.data.enterEmp.empTotal) * 100).toFixed(2);
                        }
                        //年龄
                        this.average = res.data.average;
                        let empAge = res.data.empAge || [];
                        let ageTypeList = [];
                        let otherNumList = [];
                        let manNumList = [];
                        let womanNumList = [];
                        empAge.forEach(v => {
                            otherNumList.push(v.otherNum);
                            manNumList.push(v.manNum);
                            womanNumList.push(v.womanNum);
                            if(v.type == 1){
                                ageTypeList.push('18周岁以下');
                            }else if(v.type == 2){
                                ageTypeList.push('19-30岁');
                            }else if(v.type == 3){
                                ageTypeList.push('31-40岁');
                            }else if(v.type == 4){
                                ageTypeList.push('41-50岁');
                            }else if(v.type == 5){
                                ageTypeList.push('50-60岁');
                            }else if(v.type == 6){
                                ageTypeList.push('60岁及以上');
                            }else if(v.type == 7){
                                ageTypeList.push('未知');
                            }
                        })
                        this.ageTypeList = ageTypeList;
                        this.otherNumList = otherNumList;
                        this.manNumList = manNumList;
                        this.womanNumList = womanNumList;
                        //今日出勤
                        this.AttendEmpTotal = res.data.todayAttendEmp.empTotal?res.data.todayAttendEmp.empTotal:0;
                        this.AttendmanagerNum = res.data.todayAttendEmp.managerNum || 0;
                        this.AttendworkerNum = res.data.todayAttendEmp.workerNum || 0;
                        this.localeNum = res.data.todayAttendEmp.localeNum || 0 ;
                        this.managerNumRate =this.managerNum== 0?0:parseFloat((this.AttendmanagerNum/this.managerNum*100).toFixed(2));
                        this.workerNumRate =this.workerNum == 0?0:parseFloat((this.AttendworkerNum/this.workerNum*100).toFixed(2));
                        this.empTotalRate =this.empTotal == 0?0:(this.AttendEmpTotal/this.planAttendNum*100).toFixed(2);
                        res.data.weekDataList.forEach(i => {
                            this.weekData.push(i.date.substring(5, i.date.length));
                            this.enterNumList.push(i.enterNum);
                            this.outerNumList.push(i.outerNum);
                            this.attendNumList.push(i.attendNum);
                        });
                        this.darwOnNum();
                        this.darwOnAge();
                        this.darwPersonnelChanges();
                        this.darwAttendNum();
                        this.attendanceChart()
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        ontabPosition(item){
           this.tabPosition = item.id;
           if(item.id == 0) {
               this.getAttendList();
           } else if(item.id == 1) {
                this.getEnterList();
           }
        },
        //在职人员统计
        getlocalType(){
            this.localEmpTotal = 0;
            this.localEmpList = [];
            //0-班组;1-合作单位;2-工种;
            if(this.localType == 0) {
                this.getGroupType();
            } else if (this.localType == 1) {
                this.getCorpType();
            } else if (this.localType == 2) {
                this.getWorkType();
            }

        },
        //班组统计
        getGroupType(){
            let parmas = {
                deptId: this.deptId
            };
            getAnaGroupEmp(parmas).then(res=>{
                if(res.code == 200) {
                    this.localEmpTotal = res.data.empTotal;
                    this.localEmpList = res.data.list;
                    this.localEmpList.forEach(i=>{
                        i.rate = (i.rate*100).toFixed(2)
                    })
                    this.darwOnLocal();
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        //合作单位统计
        getCorpType(){
            let parmas = {
                deptId: this.deptId
            };
            getAnaCorpEmp(parmas).then(res=>{
                if(res.code == 200) {
                    this.localEmpTotal = res.data.empTotal;
                    this.localEmpList = res.data.list;
                    this.localEmpList.forEach(i=>{
                        i.rate = (i.rate*100).toFixed(2)
                    })
                    this.darwOnLocal();
                } else {
                    this.$Message.warning(res.msg);
                }

            }).catch(error=>{
                console.log(error)
            })
        },
        //工种统计
        getWorkType(){
            let parmas = {
                deptId: this.deptId
            };
            getAnaWorkEmp(parmas).then(res=>{
                if(res.code == 200) {
                    this.localEmpTotal = res.data.empTotal;
                    this.localEmpList = res.data.list;
                    this.localEmpList.forEach(i=>{
                        i.rate = (i.rate*100).toFixed(2)
                    })
                    this.darwOnLocal();
                } else {
                    this.$Message.warning(res.msg);
                }

            }).catch(error=>{
                console.log(error)
            })
        },
        onLocalType(item){
            this.localType = item.id;
            this.getlocalType();
        },

        getAttendDate() {
            let parmas = {
                date: this.data,
                deptId: this.deptId
            };
            this.AttendDataList = [];
            getPerDayAttendData(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.AttendDataList = bubbleSort(res.data.list,'rate');
                        this.AttendDataList.forEach(i=>{
                            i.rate = (i.rate *100).toFixed(2)
                        })
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getAttendList() {
            this.personnerList = [];
            let parmas = {
                deptId: this.deptId
            };
            getRecentAttendEmp(parmas)
                .then(res => {
                    if (res.code == 200) {
                        res.data.list.forEach(i => {
                            let obj = {
                                avatar: i.avatar,
                                name: i.name,
                                time: i.time.substring(11, 16)
                            };
                            this.personnerList.push(obj);
                        });
                        this.$refs.empState.reset();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getEnterList() {
            this.personnerList = [];
            let parmas = {
                deptId: this.deptId
            };
            getRecentEnterEmp(parmas)
                .then(res => {
                    if (res.code == 200) {
                        res.data.list.forEach(i => {
                            let obj = {
                                avatar: i.avatar,
                                name: i.name,
                                time: i.date
                            };
                            this.personnerList.push(obj);
                        });
                        this.$refs.empState.reset();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //在职人员统计
        darwOnNum() {
            let onNum = this.$echarts.init(document.getElementById("num"));
            onNum.setOption({
                tooltip: {
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                color: ["#3CD068","#0058F9"],
                graphic: {
                    type: "text",
                    left: "center",
                    top: "center",
                    style: {
                        text: "在职人员",
                        textAlign: "center",
                        fill: "#A9B0BB",
                        fontSize:16,
                        align: "center",
                    },
                },
                series: [
                    {
                        name: "在职人员",
                        type: "pie",
                        radius: ['72%', '90%'],
                        // center: ["50%", "50%"],
                        label: {
                            normal: {
                                show: false,
                                position: "center"
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            {
                                value: this.workerNum,
                                name: "施工人员",
                                itemStyle: {
                                    normal: {
                                        color: { // 完成的圆环的颜色
                                            colorStops: [{
                                                offset: 0,
                                                color: '#28CBD7' // 0% 处的颜色
                                            }, {
                                                offset: 1,
                                                color: '#5D90FF' // 100% 处的颜色
                                            }]
                                        },
                                    }
                                }
                            },
                            {
                                value: this.managerNum,
                                name: "管理人员",
                                itemStyle: {
                                    normal: {
                                        color: { // 完成的圆环的颜色
                                            colorStops: [{
                                                offset: 0,
                                                color: '#FFEDB4' // 0% 处的颜色
                                            }, {
                                                offset: 1,
                                                color: '#FCC23B' // 100% 处的颜色
                                            }]
                                        },
                                    }
                                }
                            }
                        ],
                    }
                ]
            });
            onNum.on('click',item=>{
                this.$router.push({name: 'emp_list',params: {data: item.data}})
            })
        },
        darwOnAge(){
            let that = this;
            let onAge = this.$echarts.init(document.getElementById("age"));
            onAge.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                color: ["#5D90FF",'#FF6A6A','#FFD268'],
                legend: {
                    right:0,
                    textStyle: {
                        color: '#A9B0BB'
                    }
                },
                grid: {
                    top:30,
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    axisLine: {
                        lineStyle: {
                            color: "#BFBFBF",
                            type: 'dashed',
                        }
                    },
                    splitLine: {
                        //去除网格线
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color:'#BFBFBF'
                        }
                    },
                },
                yAxis: {
                    type: 'category',
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#BFBFBF",
                        }
                    },
                    splitLine: {
                        //去除网格线
                        show: false,
                        lineStyle: {
                            type: 'dashed',
                            color:'#BFBFBF'
                        }
                    },
                    data: this.ageTypeList
                },
                series: [
                    {
                        barWidth: 12,
                        name: '男',
                        type: 'bar',
                        stack: '性别',
                        itemStyle: {
                            barBorderRadius: [0,6, 6, 0]
                        },
                        data: this.manNumList
                    },
                    {
                        barWidth: 12,
                        name: '女',
                        type: 'bar',
                        stack: '性别',
                        itemStyle: {
                            barBorderRadius: [0,6, 6, 0]
                        },
                        data: this.womanNumList,
                    }
                ]
            })
        },
        darwOnLocal(){
            let local = this.$echarts.init(document.getElementById("local"));
            let list = [];
            this.localEmpList.forEach((v,i)=>{
                let obj = {
                    itemStyle:{
                        normal: {
                            color: this.colors[i],
                        },
                    },
                    value: v.num,
                    name: v.name,
                }
                list.push(obj)
            });
            local.setOption({
                tooltip: {
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                series: [
                    {
                        name: "在职人员",
                        type: "pie",
                        roseType: 'radius',
                        radius: ['20%', '78%'],
                        center: ['50%', '40%'],
                        data: list,
                        label: {
                            normal: {
                                show: false,
                                position: "center"
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                    }
                ]
            });
            local.off('click');
            local.on('click',item=>{
                item.data['localType'] = this.localType
                this.$router.push({name: 'emp_list',params: {data: item.data}})
            })
        },
        darwPersonnelChanges() {
            let Personnelchanges = this.$echarts.init(
                document.getElementById("personnelchanges")
            );
            Personnelchanges.setOption({
                color: ["#FCC23B", "#5D90FF"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: ""
                    }
                },
                legend: {
                    data: ["入职人数", "离职人数"],
                    right:0,
                    top:0,
                     textStyle: {
                        color:'#A9B0BB'
                    },
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: {
                    boundaryGap: ["5%", "5%"],
                    data: this.weekData,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true
                    }
                },
                yAxis: {
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        //去除网格线
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color:'#eee'
                        }
                    }
                },
                series: [
                    {
                        name: "入职人数",
                        type: "line",
                        data: this.enterNumList,
                        symbol: 'emptyCircle',
                        symbolSize:10,
                    },
                    {
                        name: "离职人数",
                        type: "line",
                        data: this.outerNumList,
                        symbol: 'emptyCircle',
                        symbolSize:10,
                    }
                ]
            });
        },
        darwAttendNum() {
            let attendNum = this.$echarts.init(
                document.getElementById("attendNum")
            );
            attendNum.setOption({
                grid: {
                    top:10,
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: ""
                    }
                },
                xAxis: {
                    boundaryGap: ["5%", "5%"],
                    data: this.weekData,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#A9B0BB",
                        }
                    }
                },
                yAxis: {
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#BFBFBF",
                        }
                    },
                    splitLine: {
                        //去除网格线
                        show: false,
                        lineStyle: {
                            show: false,
                        }
                    },
                },
                series: [
                    {
                        name: "出勤人数",
                        type: "line",
                        data: this.attendNumList,
                        smooth: true , //true 为平滑曲线，false为直线
                        symbol: 'none',
                        symbolSize: 0,
                        areaStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#5D90FF'
                                    },
                                    {
                                        offset: 1,
                                        color: '#8BB5FE'
                                    }
                                ], false),
                                opacity: 0.7
                            }
                        },
                        lineStyle: {
                            normal: {
                                width: 1,
                                color: '#5D90FF',
                            }
                        }
                    }
                ]
            });
            let that = this;
            attendNum.on("click", function(parmas) {
                that.data = format(new Date(), "YYYY") + "-" + parmas.name;
                that.getAttendDate();
            });
        },

        // 出勤
        attendanceChart() {
            let avgWorkTimes = this.$echarts.init(
                document.getElementById("attendance1")
            );
            let avgWorkTimes2 = this.$echarts.init(
                document.getElementById("attendance2")
            );
            let that = this
            avgWorkTimes.setOption({
                tooltip: {
                    // formatter: this.machTypeStatTipfn,
                    //触发类型：坐标轴触发
                    trigger: "item",
                    backgroundColor: "rgba(255,255,255,0.8)", //通过设置rgba调节背景颜色与透明度
                    color: "black",
                    textStyle: {
                        color: "#303030",
                    },
                },
                title: {
                    text:that.managerNumRate+'%',
                    left: "center",
                    top: "50%",
                    textStyle: {
                        color: "#333333",
                        fontSize: 20,
                        align: "center",
                    },
                },
                angleAxis: {
                    polarIndex: 0,
                    min: 0,
                    max: 100,
                    show: false,
                },
                radiusAxis: {
                    type: 'category',
                    show: true,
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,

                    },
                    axisTick: {
                        show: false
                    },
                },
                polar: [{
                    center: ['50%', '50%'], //中心点位置
                    radius: ['90%', '74%'], //图形大小
                }],
                series: [
                    {
                        type: 'bar',
                        z: 10,
                        name: "今日出勤",
                        data: [that.managerNumRate],
                        showBackground: false,
                        backgroundStyle: {
                            borderWidth: 10,
                            width: 10
                        },
                        coordinateSystem: 'polar',
                        roundCap: true,
                        barWidth: 35, //大的占比环
                        itemStyle: {
                            normal: {
                                color:new that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: '#566AE9'
                                }, {
                                    offset: 1,
                                    color: '#ABC0FB'
                                }]),
                            }
                        },
                    },
                    {
                        type: 'pie',
                        name: '内层今日出勤',
                        radius: ['90%', '74%'],
                        center: ['50%', '50%'], //中心点位置
                        startAngle: 90,
                        hoverAnimation: false,
                        clockWise: true,
                        silent: true,
                        itemStyle: {
                            normal: {
                                color: '#D1E8FE',
                                shadowBlur: 0,
                                shadowColor: '#66666a',
                            }
                        },
                        tooltip: {
                            show: false,
                        },
                        label: {
                            show: false
                        },
                        data: [100]
                    },
                ],
            });
            avgWorkTimes2.setOption({
                tooltip: {
                    // formatter: this.machTypeStatTipfn,
                    //触发类型：坐标轴触发
                    trigger: "item",
                    backgroundColor: "rgba(255,255,255,0.8)", //通过设置rgba调节背景颜色与透明度
                    color: "black",
                    textStyle: {
                        color: "#303030",
                    },
                },
                title: {
                    text:that.workerNumRate+'%',
                    left: "center",
                    top: "50%",
                    textStyle: {
                        color: "#333333",
                        fontSize: 20,
                        align: "center",
                    },
                },
                angleAxis: {
                    polarIndex: 0,
                    min: 0,
                    max: 100,
                    show: false,
                },
                radiusAxis: {
                    type: 'category',
                    show: true,
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                },
                polar: [{
                    center: ['50%', '50%'], //中心点位置
                    radius: ['90%', '74%'], //图形大小
                }],
                series: [
                    {
                        type: 'bar',
                        z: 10,
                        name: "今日出勤率",
                        data: [that.workerNumRate],
                        showBackground: false,
                        backgroundStyle: {
                            borderWidth: 10,
                            width: 10
                        },
                        coordinateSystem: 'polar',
                        roundCap: true,
                        barWidth: 35, //大的占比环
                        itemStyle: {
                            normal: {
                                color:new that.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: '#28CBD7'
                                }, {
                                    offset: 1,
                                    color: '#5D90FF'
                                }]),
                            }
                        },
                    },
                    {
                        type: 'pie',
                        name: '内层今日出勤',
                        radius: ['90%', '74%'],
                        center: ['50%', '50%'], //中心点位置
                        startAngle: 90,
                        hoverAnimation: false,
                        clockWise: true,
                        silent: true,
                        itemStyle: {
                            normal: {
                                color: '#CED7F8',
                                shadowBlur: 0,
                                shadowColor: '#66666a',
                            }
                        },
                        tooltip: {
                            show: false,
                        },
                        label: {
                            show: false
                        },
                        data: [100]
                    },
                ],
            });
        },
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.localType = 0;
                this.getlocalType();
                this.getDate();
                this.getAttendDate();
                this.getAttendList();
            }
        }
    },
    beforeDestroy() {
        if (this.timer1) {
            clearInterval(this.timer1); // 在Vue实例销毁前，清除我们的定时器
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getlocalType();
        this.getDate();
        this.getAttendDate();
        this.getAttendList();
        this.timer1 = setInterval(() => {
            this.getlocalType();
            this.getDate();
            this.getAttendDate();
            this.getAttendList();
        }, 180000);
    }
};
</script>


<style  lang="scss" scoped>
@function pxToRem($val) {
    @return $val/100 + rem;
}
.emp_cantainer{
    // width: 100%;
    // height: calc(100% - 80px);
    // overflow: auto;
    background-color: #f5f5f5;
    padding: 10px;
    box-sizing: border-box;
    &::-webkit-scrollbar {
        width: 6px;
    }
    /*滚动槽*/
    &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
    }
    /* 滚动条滑块 */
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
    }
    .content{
        display: flex;
        background: #fff;
        margin-bottom: pxToRem(20);
        .contentBox{
            overflow: hidden;
            padding-left: pxToRem(20);
            box-sizing: border-box;
            background: #fff;
            .title{
                height: pxToRem(80);
                display: flex;
                align-items: center;
                .name{
                    display: flex;
                    align-items: center;
                    margin-right: pxToRem(4);
                    font-size: pxToRem(20);
                    font-weight: 400;
                    color: #333333;
                    img{
                        margin-right:pxToRem(4);
                    }
                }
                .line{
                    min-width: pxToRem(107);
                    border-bottom: 1px solid #1891FF;
                    line-height: pxToRem(40);
                    font-size: 26px;
                    font-weight: 400;
                    color: #1891FF;
                    text-align: center;
                    margin-right:pxToRem(20);
                    span{
                        font-size: pxToRem(16);
                        color: #333;
                        float: right;
                    }
                }
            }
            .subtitle{
                margin-left: pxToRem(30);
                font-size: pxToRem(16);
                font-weight: 400;
                color: #A9B0BB;
                display: flex;
                align-items: center;
                span{
                    display: block;
                    width: pxToRem(60);
                    font-size: 30px;
                    font-family: 'Auto Digital-Bold, Auto Digital';
                    font-weight: bold;
                    color: #1891FF;
                    text-align: right;
                    margin-right: pxToRem(6);
                }
            }
            .emp_tab{
                position: absolute;
                top: pxToRem(28);
                right:pxToRem(20);
                width: pxToRem(160);
                height: pxToRem(24);
                background: #FFFFFF;
                border-radius:pxToRem(2);
                border: 1px solid #1891FF;
                display: flex;
                font-size: pxToRem(14);
                font-weight: 400;
                color: #1891FF;
                text-align: center;
                span{
                    display: block;
                    flex: 1;
                    line-height: pxToRem(22);
                    cursor: pointer;
                    &.active{
                        color: #fff;
                        background:#1891FF;
                    }
                }
            }
            .chartBox1{
                display: flex;
                overflow: hidden;
                height: pxToRem(270);
                align-items: center;
                justify-content: center;
                #num{
                    width: pxToRem(180);
                    height: pxToRem(180);
                }
                .toChar{
                    width: pxToRem(270);
                    height: pxToRem(270);
                    position: relative;
                    .cNam{
                        position: absolute;
                        bottom:pxToRem(10);
                        left: 50%;
                        transform: translateX(-50%);
                        font-size: pxToRem(16);
                        font-weight: 400;
                        color: #4E5969;
                    }
                    .cNum{
                        position: absolute;
                        top:40%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        font-size: pxToRem(40);
                        font-family: 'Auto Digital-Bold, Auto Digital';
                        font-weight: bold;
                        color: #1891FF;
                    }
                }
                .toUp{
                    height: 100%;
                    margin-left: pxToRem(50);
                    .local{
                        width: pxToRem(260);
                        height: pxToRem(30);
                        box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.1600);
                        border-radius: 20px 20px 20px 20px;
                        opacity: 1;
                        border: 1px solid #1891FF;
                        display: flex;
                        overflow: hidden;
                        span{
                            display: block;
                            flex: 1;
                            font-size: pxToRem(16);
                            font-weight: 400;
                            color: #1891FF;
                            text-align: center;
                            line-height: pxToRem(30);
                            cursor: pointer;
                            &.active{
                                background: #1891FF;
                                color: #fff;
                            }
                        }
                    }
                    .localItems{
                        height: pxToRem(210);
                        overflow: hidden;
                        .list{
                            overflow: hidden;
                            padding-left: pxToRem(20);
                            li{
                                display: flex;
                                height: pxToRem(45);
                                align-items: center;
                                font-size: pxToRem(14);
                                font-weight: 400;
                                color: #4E5969;
                                .radius{
                                    display:block;
                                    width: pxToRem(20);
                                    height: pxToRem(9);
                                    border-radius: 6px;
                                    margin-right: pxToRem(6);
                                }
                                .name{
                                    display:block;
                                    width: pxToRem(80);
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;

                                }
                                .sub{
                                    display:block;
                                    width: pxToRem(60);
                                }
                            }
                        }
                    }
                }
                #local{
                    width: pxToRem(270);
                    height: pxToRem(270);
                }
                .lable{
                    padding-left: pxToRem(20);
                    font-size: pxToRem(16);
                    color: #333333;
                    div{
                        display: flex;
                        margin-bottom: pxToRem(40);
                        align-items: center;
                        cursor: pointer;
                        &:nth-child(1) .radio{
                            background: linear-gradient(180deg, #FFEDB4 0%, #FCC23B 100%);
                        }
                        &:nth-child(2) .radio{
                            background: linear-gradient(180deg, #28CBD7 0%, #5D90FF 100%);
                        }
                        .radio{
                            display: block;
                            width: pxToRem(16);
                            height: pxToRem(16);
                            margin-right: pxToRem(20);
                            border-radius: 50%;
                        }
                        .number{
                            color: #1891FF;
                            margin-left: pxToRem(20);
                        }
                    }
                }
                .type1{
                    flex: 1;
                }
                .attendance{
                    width: pxToRem(200);
                    height: pxToRem(200);
                    margin: 0 auto;
                    #attendance1,#attendance2{
                        width: pxToRem(200);
                        height: pxToRem(200);
                    }
                }
                .subTitle{
                    text-align: center;
                    font-size: pxToRem(16);
                    color: #333333;
                }
            }
            .chartBox2{
                overflow: hidden;
                #personnelchanges{
                    width: 100%;
                    height: pxToRem(280);
                }
                #age{
                    width: 100%;
                    height: pxToRem(220);
                }
                .tabPositionTtems{
                    width: 100%;
                    height: pxToRem(220);
                    ul{
                        overflow:hidden;
                        display: flex;
                        flex-wrap: wrap;
                        li{
                            width: 20%;
                            text-align: center;
                            list-style: none;
                            font-size: pxToRem(12);
                            color: #333333;
                            line-height:1.2;
                            margin-bottom: pxToRem(10);
                            span{
                                color: #A9B0BB;
                            }
                            img{
                                width:pxToRem(64);
                                height:pxToRem(64);
                                border-radius: 50%;
                                box-shadow: 0 0 3px #3755A7;
                            }
                        }
                    }
                }
                #attendNum{
                    width: 100%;
                    height: pxToRem(180);
                    margin-bottom: pxToRem(40);
                }
                #AttendSlide{
                    height: pxToRem(360);
                }
                .grouBox{
                    overflow: hidden;
                    li{
                        display: flex;
                        align-items: center;
                        height: pxToRem(44);
                        font-size: pxToRem(14);
                        justify-content: center;
                        span{
                            display: block;
                        }
                        .name{
                            width: pxToRem(100);
                        }
                        .num{
                            width: pxToRem(40);
                            color: #A9B0BB;
                        }
                        .out{
                            width: pxToRem(256);
                            height: pxToRem(10);
                            background: #E5E7EA;
                            box-shadow: inset 0px 3px 6px 1px rgba(0,0,0,0.1600);
                            .in{
                                height: pxToRem(10);
                                background: linear-gradient(90deg, #28CBD7 0%, #5D90FF 100%);
                                position: relative;
                                &::after{
                                    content: '';
                                    width: pxToRem(3);
                                    height: pxToRem(14);
                                    background: #5D90FF;
                                    box-shadow: -1px 0px 0px 1px rgba(0,0,0,0.1600);
                                    position: absolute;
                                    right: 0;
                                    top:pxToRem(-2);
                                }
                            }
                        }
                        .perc{
                            width: pxToRem(110);
                            color: #A9B0BB;
                            text-align: right;
                        }
                    }
                }
            }
        }
        .contentLeft{
            overflow: hidden;
            .contentMain{
                display: flex;
                overflow: hidden;
            }
            .gender{
                display: flex;
                div{
                    flex: 1;
                    position: relative;
                    padding-top: pxToRem(120);
                    text-align: center;
                    line-height: pxToRem(50);
                    font-size: pxToRem(16);
                    font-weight: 400;
                    color: #000000;
                    span{
                        font-size: pxToRem(24);
                        font-family: 'Auto Digital-Bold, Auto Digital';
                        font-weight: bold;
                        color: #1891FF;
                        margin: 0 pxToRem(10);
                    }
                    img{
                        height: pxToRem(34);
                        position: absolute;
                        top: pxToRem(36);
                        left: 50%;
                        transform: translateX(-50%);
                    }
                    .name{
                        position: absolute;
                        top:pxToRem(76);
                        left: 50%;
                        transform: translateX(-50%);
                        font-size: pxToRem(16);
                        font-weight: 400;
                        color: #FFFFFF;
                        white-space: nowrap;
                        line-height: 1;
                    }
                }
                .pic1{
                    background: url(../../assets/svg/f1.svg) no-repeat center top;
                    background-size:pxToRem(120) pxToRem(120);
                }
                .pic2{
                    background: url(../../assets/svg/f3.svg) no-repeat center top;
                    background-size:pxToRem(120) pxToRem(120);
                }
            }
            .sexBar{
                width: pxToRem(266);
                height: pxToRem(12);
                border-radius: pxToRem(7);
                margin: pxToRem(45) auto pxToRem(20);
                cursor: pointer;
                // font-size: pxToRem(12);
                // color: #fff;
                // line-height:pxToRem(14);
                // text-align: right;
                // padding-right: pxToRem(10);
                // box-sizing: border-box;
                display: flex;
                overflow: hidden;
                .in{
                    background: linear-gradient(270deg, #28CBD7 0%, #5D90FF 100%);
                    height: pxToRem(12);
                    box-sizing: border-box;
                }
                .out{
                    background: linear-gradient(270deg, #FF6A6A 0%, #A06AFF 100%);
                    height: pxToRem(12);
                    box-sizing: border-box;
                }
            }
        }
    }
}
</style>
